<template>
  <!--精彩推荐设计-->
  <div class="recommend">
    <div class="recommend_title">
      精 彩 推 荐
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(pages,index) in changeFocusList" :key="index">
                <div class="swiper-content" v-for="(page,index) in pages" :key="index">
                    <img :src="page.pic_info.url" alt="">
                </div>
            </div>
        </div>
        <!--分页样式-->
        <div class="swiper-pagination"></div>
        <!--前进后退-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Swiper from 'swiper';
    import 'swiper/css/swiper.min.css';
    export default {
        name: "RecommendFocus",
        data(){
          return{
            recommendFocusList:[]
          }
        },
        computed:{
          ...mapState(['recommend']),
          //对recommend的focus进行分类
          changeFocusList(){
            if(this.recommend.focus){
              const focus=this.recommend.focus;
                let outerArr=[],innerArr=[];
                focus.data.content.forEach(item=>{
                    if(innerArr.length!==1){
                      innerArr.push(item);
                    }else{
                      innerArr.push(item);
                      outerArr.push(innerArr);
                      innerArr=[];
                    }
                })
              return outerArr;
            }


          }
        },
         watch:{
        //当数据加载成功以后，再响应滑动事件
         changeFocusList(value){
          this.$nextTick(()=>{
            new Swiper('.swiper-container', {
              // autoplay:true,
              loop:true,
              speed:2000, // 播放的速度
              // 如果需要分页器，即下面的小圆点
              pagination: {
                el:'.swiper-pagination',
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              }
            })
          })
        }
      }

    }
</script>

<style scoped lang="less">
  .recommend{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
  .recommend .recommend_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
  /*实现精彩推荐轮播*/
  .recommend{
    .swiper-container{
      margin-top: 30px;
      padding-bottom: 30px;
      .swiper-wrapper{
        left: 50%;
        margin-left: -600px;
        .swiper-slide{
          display: flex;
          flex-direction: row;
          .swiper-content{
            margin-right: 20px;
            img{
              width: 590px;
              height: 236px;
            }
          }

        }
      }
      .swiper-button-prev,.swiper-button-next{
        color: rgba(0,0,0,0.7);
        top: 30%;
        background-color: #efeeef;
        padding: 20px 10px;
      }
    };
  }

</style>
